﻿/*   
* 作者：彭白洋 2009.10.24
* 功能：可弹出自定义字符串、Dom对象，根据事件焦点弹出、关闭动画
* 调用方法：
*   1、初始化直接打开：$("#buttonID").layer().open()；
*   2、初始化：var layer=$("#buttonID").layer()；打开：layer.open()；关闭：layer.close()；
*   3、初始化：var layer=$("#buttonID").layer({自定义配置})；打开：layer.open()；关闭：layer.close()；
*样式：
*   .layer-box{background-color:#fff;width: 692px;border: 1px solid #ccc;position:absolute;}
*   .layer-box div.layer-bar{background: #f4f4f4;padding: 5px;margin:0px;text-align:left;height:18px;position:relative;}
*   .layer-box div.layer-bar span.layer-close{position:absolute;width:18px;height:18px;top:0px;right:0px;cursor:pointer;}
*   .layer-box div.layer-content{margin:0px;padding:5px 0px 0px 0px;text-align:center;}
*/
/// <reference path="jquery-1.3.2-vsdoc.js" />
(function($) {
    $.layer = function(element, options) {
        var base = this;
        base.$el = $(element);
        base.tagHide = true;
        //初始化层
        base.init = function() {

            base.options = $.extend({}, $.layer.defaults, options);
            base.$layerBox = $(base.options.template);
            base.posX = base.posY = 0;
            base.moveing = false;

            //加载样式
            if (!$.layer.hasCss && base.options.cssurl != "") {
                $("head", base.options.target).append("<link href=\"" + base.options.cssurl + "\" rel=\"stylesheet\" type=\"text/css\" />");
                $.layer.hasCss = true;
            }

            //加载层对象
            $.layer.maskLayerIndex += 20; //调高层位置
            base.$layerBox.appendTo("body", base.options.target).css({ "z-index": $.layer.maskLayerIndex }).hide();
            base.$layerBox.find("div[class='layer-title']").append(base.options.title);
            //判断内容是字符串还是Jquery对象
            if (typeof (base.options.content) == "object") {
                base.$tempContentParent = base.options.content.parent();
                base.tagHide = base.options.content.is(":hidden");
                base.$tempContent = base.options.content.clone();
                base.options.content.appendTo(base.$layerBox.find("div[class='layer-content']")).show();
            }
            else {
                base.$layerBox.find("div[class='layer-content']").append(base.options.content);
            }
            //绑定关闭按钮事件
            base.$layerBox.find("span[class='layer-close']").mousedown(function(event) {
                //阻止事件冒泡
                if (event && event.stopPropagation) {
                    event.stopPropagation();
                } else {
                    window.event.cancelBubble = true;
                }
                base.close();
                return false;
            });
            base.$layerBox.find("div[class='layer-bar']").mousedown(function(event) {
                base.moveStart(event);
            });
            //base.$layerBox.show();


        }

        //打开层
        base.open = function() {
            //层显示动画
            //alert($("html", base.options.target).height());
            var mtop = ($("html", base.options.target).height() - base.options.height) / 2 + $(document, base.options.target).scrollTop(); //
            var mleft = $("html", base.options.target).width() / 2 - base.options.width / 2; //
            base.$layerBox.css({ top: base.$el.offset().top, left: base.$el.offset().left, width: 0, height: 0 }).animate({
                left: mleft,
                top: mtop,
                width: base.options.width,
                height: base.options.height,
                opacity: "show"
            }, "slow", function() {
                //加载遮罩层
                if (base.options.masklayer.show) {
                    $.layer.maskLayerIndex -= 10; //降低层位置
                    base.$masklayer = $("<div style=\"display:none; z-index:" + $.layer.maskLayerIndex + "; filter: alpha(opacity:" + base.options.masklayer.alpha + "); left: 0px; width: 100%; position: absolute; top: 0px; height: " + $(document, base.options.target).height() + "px; background-color:" + base.options.masklayer.bgcolor + "\"></div>");
                    base.$masklayer.appendTo("body", base.options.target).animate({
                        opacity: 'toggle'
                    }, 500);
                }
            });
        }

        //开始移动
        base.moveStart = function(event) {
            base.moveing = true;
            base.bgColor = base.$layerBox.css("background-color");
            base.$layerBox.css("background-color", "Transparent").children().hide();

            base.posX = event.pageX - base.$layerBox.offset().left;
            base.posY = event.pageY - base.$layerBox.offset().top; ;
            $(document).mousemove(function(event) {
                base.moveOn(event);
            }).mouseup(function() {
                base.moveStop();
            });
            if ($.browser.msie) {
                base.$layerBox.get(0).setCapture();
            } else {
                document.addEventListener("mousemove", base.moveOn, true);
            }
        }

        //移动中
        base.moveOn = function(event) {
            if (base.moveing) {
                window.getSelection && window.getSelection().removeAllRanges();
                base.$layerBox.css({ top: Math.max(event.pageY - base.posY, 0), left: Math.max(event.pageX - base.posX, 0) });
                return false;
            }
        }

        //移动停止
        base.moveStop = function() {
            base.$layerBox.css("background-color", base.bgColor).children().show();
            base.moveing = false;
            $(document, base.options.target).unbind("mousemove");
            if ($.browser.msie) {
                base.$layerBox.get(0).releaseCapture();
            } else {
                document.removeEventListener("mousemove", base.moveOn, true);
            }
        }

        //关闭层
        base.close = function() {
            if (base.$tempContent) {
                base.$tempContent.appendTo(base.$tempContentParent);
                if(base.tagHide){
                    base.$tempContent.hide();
                }
            }
            if (base.options.masklayer.show) {
                base.$masklayer.animate({
                    opacity: 'toggle'
                }, 500, function() {
                    $(this).remove();
                    base.$layerBox.animate({
                        left: base.$el.offset().left,
                        top: base.$el.offset().top,
                        width: 0,
                        height: 0,
                        opacity: "hide"
                    }, "hide", function() {
                        $(this).remove();
                    });
                });
            }
            else {
                base.$layerBox.animate({
                    left: base.$el.offset().left,
                    top: base.$el.offset().top,
                    width: 0,
                    height: 0,
                    opacity: "hide"
                }, "hide", function() {
                    $(this).remove();
                });
            }
        }

        base.init();
    }

    $.layer.hasCss = false;
    $.layer.maskLayerIndex = 1000;
    //默认配置
    $.layer.defaults = {
        masklayer: { show: true, bgcolor: '#eee', alpha: 50 }, //是否显示覆盖层
        target: window.self.document,
        cssurl: "layer.css",
        title: "层标题",
        content: "层内容",
        width: 500,
        height: 300,
        template: "<div class=\"layer-box\"><div class=\"layer-bar\"><div class=\"layer-title\"></div><span class=\"layer-close\">×</span></div><div class=\"layer-content\"></div></div>"
    }

    $.fn.layer = function(options) {
        return new $.layer(this, options);
    }
})(jQuery);